<template>
  <div id="container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户列表" name="userList">
        <user-list v-if="activeName === 'userList'" />
      </el-tab-pane>
      <el-tab-pane label="黑名单" name="administrator">
        <black-list v-if="activeName === 'administrator'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UserList from "@/views/user/listPage/BlackListSearch.vue";
import BlackList from "@/views/user/listPage/BlackList.vue";
export default {
  name: "UserData",
  components: {
    UserList,
    BlackList,
  },
  data() {
    return {
      activeName: "userList",
    };
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
    },
  },
};
</script>

<style scoped>
#container {
  height: 100%;
  background-color: #fff;
}
</style>